<template lang="">
  <div class="commonLayout">
    <!-- 背景 -->
    <div id="bgvid">
      <img src="~@/assets/register/images/background.png" alt="">
    </div>
    <h1 style="text-align: center;">登录/注册</h1>

    <div class="container w3layouts agileits">
      <div class="login w3layouts agileits">
        <h2>登 录</h2>
        <el-form ref="loginForm" label-position="top" status-icon :rules="rules" :model="formLogin" size="default">
          <el-form-item prop="username">
            <el-input type="text" @keyup.enter.native="handleBindPhone" v-model="formLogin.username" placeholder="用户名"
              clearable>
              <i slot="prepend" class="el-icon-user-solid"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input @keyup.enter.native="handleBindPhone" type="password" v-model="formLogin.password"
              placeholder="密码" show-password clearable>
              <i slot="prepend" class="el-icon-key"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="yzm">
            <el-input type="text" v-model="formLogin.yzm" @keyup.enter.native="handleBindPhone" placeholder="验证码"
              clearable style="width: 70%;">
              <i slot="prepend"><svg t="1632108449109" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="2415" width="16" height="16">
                  <path
                    d="M918.090878 267.682575c-36.099173-2.492774-72.380494-9.273201-103.496166-19.237133-10.075473-3.03001-20.161179-6.388501-30.306236-10.021238-21.385053-6.29845-50.481741-18.791995-83.506902-36.592406-0.354064-0.161682-0.704035-0.364297-1.052982-0.552585-7.763824-4.190439-15.706727-8.66331-23.793916-13.412474-10.898211-6.243191-21.689998-12.902868-32.462343-19.84293-0.417509-0.281409-0.829901-0.533143-1.237177-0.806365-7.738241-4.997827-15.443737-10.158361-23.092951-15.518438-4.976338-3.413749-9.959839-7.051603-14.945387-10.659781-3.748371-2.7486-7.496741-5.330402-11.248182-8.16496-27.427676-20.48659-54.499242-43.471071-79.849606-68.233034-25.350364 24.761963-52.426023 47.746444-79.853699 68.233034-3.744277 2.833535-7.498788 5.41636-11.246135 8.16496-4.991688 3.608178-9.970072 7.246031-14.945387 10.659781-7.652284 5.360078-15.356756 10.520611-23.094998 15.518438-0.405229 0.273223-0.824785 0.524956-1.232061 0.806365-10.780531 6.941086-21.564132 13.599739-32.464389 19.84293-8.090259 4.748141-16.030092 9.222035-23.798009 13.412474-0.345877 0.187265-0.704035 0.38988-1.046842 0.552585-33.025161 17.800411-62.127989 30.292933-83.515089 36.592406-10.138918 3.637854-20.216437 6.992251-30.302143 10.021238-31.118741 9.963932-67.390853 16.744359-103.496166 19.237133l-0.086981 0c1.052982 16.181541 2.13871 37.645388 3.403516 60.882626 0.200568 0 0.434905 0 0.669242-0.035816 6.091742 86.72827 23.472598 210.093972 49.694819 282.57782 1.174756 3.166109 2.172479 6.471388 3.347235 9.605775 0.550539 1.473561 1.196245 2.837628 1.750877 4.303003 62.763462 162.03849 171.776272 279.94076 302.786071 323.156004l0 0.450255c17.316387 5.716188 31.905664 9.249665 43.426045 11.467169 11.518335-2.223644 26.115797-5.750981 43.432185-11.467169l0-0.450255c131.011846-43.215244 240.017492-161.117514 302.788118-323.156004 0.554632-1.475608 1.198292-2.829442 1.757017-4.303003 1.166569-3.134387 2.168386-6.439666 3.339048-9.605775 26.227338-72.484871 43.60717-195.84955 49.700959-282.57782 0.236384 0.033769 0.473791 0.033769 0.669242 0.033769 1.26276-23.235191 2.343371-44.696991 3.3984-60.880579L918.090878 267.682575zM870.734314 309.574684l-0.509606 9.497305c-0.51984 2.166339-0.86367 4.379751-1.02126 6.622838-5.674233 80.730673-21.61018 200.398146-47.276746 271.336802-0.710175 1.920746-1.375324 3.885494-2.034333 5.847172-0.411369 1.221828-0.816598 2.449795-1.445932 4.049223-0.524956 1.232061-1.036609 2.467191-1.38351 3.396353C758.704798 760.970398 658.351206 869.434715 541.728068 907.903865c-1.886977 0.620124-3.708462 1.359974-5.458315 2.200108-7.915273 2.473331-15.665795 4.582365-23.177885 6.302543-7.460925-1.709945-15.179724-3.810792-23.077601-6.272867-1.77646-0.855484-3.626597-1.599428-5.544273-2.230808C367.840716 869.434715 267.48917 760.970398 209.243605 610.599645c-0.458441-1.206478-0.940418-2.37714-1.692548-4.14746-0.443092-1.178849-0.840134-2.394537-1.251503-3.610224-0.663102-1.963725-1.332345-3.931542-1.934049-5.560646-25.759687-71.198575-41.694611-190.869119-47.364751-271.582395-0.157589-2.251274-0.50142-4.473895-1.027399-6.644327l-0.497327-9.296737c-0.078795-1.493004-0.157589-2.974751-0.236384-4.446265 24.62177-3.805676 48.370661-9.30083 69.956282-16.21838 10.130731-3.045359 20.419052-6.435573 31.414477-10.353812 25.206078-7.576559 56.437383-21.220301 90.478687-39.532365 0.590448-0.302899 1.155313-0.603751 1.654686-0.877997 8.228405-4.439102 16.647145-9.182127 24.809035-13.975293 10.709923-6.132674 21.985734-13.023618 34.475186-21.064758 0.349971-0.224104 0.952698-0.611937 1.296529-0.846274 8.204869-5.300726 16.375969-10.776438 24.12035-16.205077 4.546549-3.114944 9.094122-6.402827 13.650905-9.699919l2.443655-1.769296 4.041036-2.912329c2.581802-1.847068 5.16258-3.699252 7.535627-5.495154 17.894555-13.369495 35.278481-27.453259 51.984978-42.119283 16.687054 14.650675 34.022884 28.704762 51.797713 41.980113 2.565429 1.936095 5.127787 3.776 7.691169 5.609765l4.27742 3.085268 1.552356 1.125637c4.77884 3.462868 9.56075 6.92369 13.94971 9.928117 8.117888 5.693676 16.301268 11.17348 23.730471 15.962553l2.059915 1.345648c12.386098 7.980765 23.663956 14.874779 34.072003 20.836561 8.576329 5.03262 16.994046 9.774621 25.015743 14.103206 0.399089 0.217964 0.950651 0.50756 1.534959 0.808412 34.167171 18.404162 65.523319 32.114418 90.813309 39.71963 11.014868 3.921309 21.271466 7.30129 30.587646 10.091846 22.11774 7.083326 46.068222 12.641925 70.781066 16.470113C870.888833 306.717613 870.812085 308.142056 870.734314 309.574684zM711.261253 411.655617 476.928227 651.831722 356.968088 528.867156c-8.311293-8.515954-21.772886-8.515954-30.084179 0-8.311293 8.523117-8.311293 22.320355 0 30.839379l135.00274 138.378627c4.155646 4.260024 9.597589 6.390547 15.041578 6.390547 5.443989 0 10.886955-2.130524 15.040555-6.390547l249.374604-255.592212c8.311293-8.515954 8.311293-22.316262 0-30.837332C733.034139 403.137617 719.571523 403.137617 711.261253 411.655617z"
                    p-id="2416"></path>
                </svg></i>
            </el-input>
            <img src="api/captcha" style="width: 30%; height: 40px; cursor: pointer;" class='switch'>
          </el-form-item>
        </el-form>
        <p>
          <el-checkbox v-model="checked" class="remeberPwd">记住密码</el-checkbox>
          <span
            style="color: #409EFF;padding-left: 180px;line-height: 19px;font-size: 14px;cursor: pointer;">忘记密码?</span>
        </p>
        <el-button round size="default" @click="handleBindPhone" type="primary" :loading="logining"
          class="button-login iconfont My-new-iconxuanzhonghaoyou" style="width: 100%;margin-top: 10px;"
          @keydown="show($event)">登录
        </el-button>
        <div class="social-icons w3layouts agileits">
          <p>- 其他方式登录 -</p>
          <ul @click='other'>
            <li class="qq"><a href="#"> <span class="icons w3layouts agileits"></span> <span
                  class="text w3layouts agileits">QQ</span></a></li>
            <li class="weixin w3ls"><a href="#"> <span class="icons w3layouts"></span> <span
                  class="text w3layouts agileits">微信</span></a></li>
            <li class="weibo aits"><a href="#"> <span class="icons agileits"></span> <span
                  class="text w3layouts agileits">微博</span></a></li>
            <div class="clear"> </div>
          </ul>
        </div>
        <div class="clear"></div>
      </div>
      <div class="register w3layouts agileits">
        <el-row :gutter="10">
          <el-col :span="7">
            <h2>注 册</h2>
          </el-col>
          <el-col :span="17">
            <el-alert title="注意!该验证码为QQ邮箱验证码，打开QQ邮箱查看" type="warning" effect="dark" center show-icon :closable="false">
            </el-alert>
          </el-col>
        </el-row>
        <el-form ref="registerForm" label-position="top" status-icon :rules="rulesRegister" :model="formRegister"
          size="default">
          <el-form-item prop="username">
            <el-input type="text" @keyup.enter.native="Submitregistration" v-model="formRegister.username"
              placeholder="用户名" clearable>
              <i slot="prepend" class="el-icon-user-solid"></i>
            </el-input>
          </el-form-item>

          <el-form-item prop="email">
            <el-input @keyup.enter.native="Submitregistration" v-model="formRegister.email" placeholder="QQ邮箱"
              clearable>
              <i slot="prepend"><svg t="1632617890081" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="2171" width="16" height="16">
                  <path
                    d="M531.4 53c134.224 0 239.864 39.763 316.919 120.531 65.869 69.585 99.425 155.323 99.425 257.216 0 86.98-28.585 167.749-83.269 242.304-55.927 73.313-119.31 110.59-191.394 110.59-52.198 0-82.026-26.094-90.726-77.04-36.042 52.189-84.512 78.283-144.167 78.283-55.927 0-100.668-18.639-135.467-55.916-34.8-37.278-52.199-84.496-52.199-140.413 0-86.98 26.1-162.779 80.783-229.878 53.442-68.343 118.068-101.893 192.638-101.893 53.44 0 90.725 28.58 113.096 85.739l17.4-62.13h110.61l-84.511 303.192c-12.428 44.733-18.642 72.07-18.642 83.253 0 16.154 8.7 24.852 27.342 24.852 34.799 0 69.598-23.61 104.396-68.342 39.77-52.189 59.656-116.804 59.656-191.359 0-77.04-27.342-142.897-82.026-196.329-60.898-59.644-142.925-88.223-247.321-88.223-111.854 0-200.094 34.792-267.207 105.62-67.112 69.585-99.425 160.293-99.425 270.884 0 121.773 34.799 214.967 105.64 277.097 64.626 57.159 157.838 85.738 278.391 85.738 80.783 0 149.138-13.668 206.308-38.52 52.199-24.852 93.212-58.402 125.525-103.135H990c-43.499 78.283-108.125 137.928-192.637 177.69C720.308 957.604 635.796 975 541.342 975c-159.08 0-283.363-41.005-371.603-123.016C81.499 769.973 38 658.14 38 518.97c0-129.229 42.256-237.334 128.01-324.315C257.98 100.218 379.775 53 531.4 53z m15.116 312c-47.302 0-88.38 23.64-123.235 70.919C388.427 483.198 371 535.453 371 593.93c0 29.86 6.224 52.256 18.672 67.186C402.12 677.291 420.792 686 448.177 686c23.651 0 47.302-8.71 69.708-26.128 24.896-19.907 42.323-46.035 52.282-77.14l24.895-89.58C605.021 457.07 610 434.673 610 427.208c0-18.662-7.469-33.593-19.917-44.79C577.635 369.977 562.698 365 546.516 365z"
                    p-id="2172"></path>
                </svg></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="yzmy">
            <el-input type="text" v-model="formRegister.yzmy" @keyup.enter.native="Submitregistration"
              placeholder="邮箱验证码" clearable>
              <i slot="prepend"><svg t="1632618529350" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="5101" width="16" height="16">
                  <path
                    d="M832 149.333333a128 128 0 0 1 128 128v469.333334a128 128 0 0 1-128 128H192a128 128 0 0 1-128-128V277.333333a128 128 0 0 1 128-128z m42.666667 150.826667L535.68 526.165333a42.666667 42.666667 0 0 1-44.202667 1.92l-3.136-1.92L149.333333 300.181333V746.666667a42.666667 42.666667 0 0 0 39.466667 42.56L192 789.333333h640a42.666667 42.666667 0 0 0 42.666667-42.666666V300.16zM819.029333 234.666667H204.949333L512 439.36 819.029333 234.666667z"
                    p-id="5102"></path>
                </svg></i>
              <i slot='append'>
                <el-button v-if="show" @click="onSend">获取验证码</el-button>
                <el-button v-if="!show" disabled>{{count+'s后重新获取'}}</el-button>
              </i>
            </el-input>
          </el-form-item>

          <el-form-item prop="pass">
            <el-input @keyup.enter.native="Submitregistration" type="password" v-model="formRegister.pass"
              placeholder="密码" show-password clearable>
              <i slot="prepend" class="el-icon-key"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="checkPass">
            <el-input @keyup.enter.native="Submitregistration" type="password" v-model="formRegister.checkPass"
              placeholder="确认密码" clearable>
              <i slot="prepend"><svg t="1632617455271" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="1254" width="16" height="16">
                  <path
                    d="M718.77 960H305.23c-66.51 0-120.62-54.12-120.62-120.62V502.91c0-66.5 54.11-120.62 120.62-120.62h383.52V275.21c0-97.46-79.29-176.75-176.75-176.75s-176.75 79.29-176.75 176.75v38.89c0 9.52-7.72 17.23-17.23 17.23s-17.23-7.71-17.23-17.23v-38.89C300.79 158.75 395.54 64 512 64s211.21 94.75 211.21 211.21v107.17c64.46 2.34 116.17 55.51 116.17 120.53v336.47c0 66.5-54.1 120.62-120.61 120.62zM305.23 416.76c-47.5 0-86.15 38.65-86.15 86.15v336.47c0 47.5 38.65 86.15 86.15 86.15h413.54c47.5 0 86.15-38.65 86.15-86.15V502.91c0-47.5-38.65-86.15-86.15-86.15H305.23zM512 860.69c-104.51 0-189.54-85.03-189.54-189.52 0-104.53 85.03-189.56 189.54-189.56s189.54 85.03 189.54 189.56c0 104.49-85.03 189.52-189.54 189.52z m0-344.62c-85.51 0-155.08 69.58-155.08 155.09 0 85.5 69.57 155.06 155.08 155.06s155.08-69.56 155.08-155.06c0-85.51-69.57-155.09-155.08-155.09z m-25.11 227.94c-4.57 0-8.95-1.82-12.18-5.05l-61.05-61.06c-6.73-6.73-6.73-17.63 0-24.37s17.63-6.73 24.37 0l48.87 48.88 99.08-99.08c6.73-6.73 17.63-6.73 24.37 0s6.73 17.63 0 24.37L499.08 738.96a17.251 17.251 0 0 1-12.19 5.05z"
                    p-id="1255"></path>
                </svg></i>
            </el-input>
          </el-form-item>
        </el-form>
        <el-button round size="default" type="primary" :loading="loginings" @click='Submitregistration'
          class="button-login iconfont My-new-iconxuanzhonghaoyou" style="width: 100%;margin-top: 10px;">注册
        </el-button>
        <div class="clear"></div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</template>
<script>
    import jquery from 'jquery'
    export default {
        data() {
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.formRegister.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {

                show: true,
                count: '',
                timer: null,

                logining: false,
                loginings: false,
                // 记住密码checked
                checked: true,
                // 表单校验登录
                rules: {
                    username: [{
                        required: true,
                        message: '请输入用户名',
                        messtrigger: 'blur',
                        trigger: 'blur'
                    }, {
                        required: true,
                        pattern: /^(\w){4,12}$/,
                        message: '只能输入4-12个字母、数字、下划线 ',
                        trigger: 'blur'
                    }],
                    password: [{
                        required: true,
                        messtrigger: 'blur',
                        message: '请输入密码',
                        trigger: 'blur'
                    }, {
                        required: true,
                        pattern: /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/,
                        message: '最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符',
                        trigger: 'blur'
                    }],
                    yzm: [{
                        required: true,
                        messtrigger: 'blur',
                        message: '请输入验证码',
                        trigger: 'blur'
                    }]
                },
                // 表单登录
                formLogin: {
                    username: "",
                    password: "",
                    yzm: ""
                },
                //表单注册
                formRegister: {
                    username: '',
                    pass: '',
                    checkPass: '',
                    email: '',
                    yzmy: ''
                },
                //表单验证注册
                rulesRegister: {
                    username: [{
                        required: true,
                        message: '请输入用户名',
                        messtrigger: 'blur',
                        trigger: 'blur'
                    }, {
                        required: true,
                        pattern: /^(\w){4,12}$/,
                        message: '只能输入4-12个字母、数字、下划线 ',
                        trigger: 'blur'
                    }],
                    pass: [{
                        required: true,
                        messtrigger: 'blur',
                        message: '请输入密码',
                        trigger: 'blur'
                    }, {
                        required: true,
                        pattern: /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/,
                        message: '最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符',
                        trigger: 'blur'
                    }],
                    checkPass: [{
                        validator: validatePass2,
                        trigger: 'blur'
                    }],
                    email: [{
                        required: true,
                        messtrigger: 'blur',
                        message: '请输入QQ邮箱',
                        trigger: 'blur'
                    }, {
                        required: true,
                        pattern: /^[1-9][0-9]{4,10}@qq.com$/,
                        message: '输入正确的QQ邮箱（5-11位的QQ）',
                        trigger: 'blur'
                    }],
                    yzmy: [{
                        required: true,
                        messtrigger: 'blur',
                        message: '请输入邮箱验证码',
                        trigger: 'blur'
                    }, {
                        required: true,
                        pattern: /^[a-zA-Z0-9]{6}$/,
                        message: '输入6位验证码',
                        trigger: 'blur'
                    }]
                }
            }
        },
        mounted() {
            this.account(); //获取cookie的方法
            jquery('.switch').click(function() {
                jquery(this).attr('src', `api/captcha?id=${Math.random()}`);
            });
        },
        methods: {
            other() {
                window.layui.use('layer', function() {
                    const layer = window.layui.layer
                    layer.msg('维护中....')
                })
            },
            //发送验证码
            onSend() {
                const TIME_COUNT = 60;
                let yz = /^[1-9][0-9]{4,10}@qq.com$/
                if (yz.test(this.formRegister.email)) {
                    this.$message({
                        message: 'QQ邮箱已发送',
                        type: 'success'
                    });
                    if (!this.timer) {
                        this.count = TIME_COUNT;
                        this.show = false;
                        this.timer = setInterval(() => {
                            if (this.count > 0 && this.count <= TIME_COUNT) {
                                this.count--;
                            } else {
                                this.show = true;
                                clearInterval(this.timer);
                                this.timer = null;
                            }
                        }, 1000)
                    }
                    this.$axios.get('/ver', {
                        params: {
                            email: this.formRegister.email
                        }
                    })

                } else {
                    this.$refs.registerForm.validateField('email')
                }
            },

            //记住密码保存到cookie
            account() {
                // if (document.cookie.length <= 0) {
                this.formLogin.username = this.getCookie("username");
                this.formLogin.password = this.getCookie("password");
                // }
            },
            setCookie(c_name, c_pwd, exdate) {
                //账号，密码 ，过期的天数
                var exdate = new Date();
                exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate); //保存的天数
                document.cookie =
                    "username=" + c_name + ";path=/;expires=" + exdate.toLocaleString();
                document.cookie =
                    "password=" + c_pwd + ";path=/;expires=" + exdate.toLocaleString();
            },
            getCookie(name) {
                var arr = document.cookie.split(";");
                //["_ga=GA1.1.1756734561.1561034020", " mobile=123" password=456"]
                for (var i = 0; i < arr.length; i++) {
                    var arr2 = arr[i].split("="); // ["_ga", "GA1.1.1756734561.1561034020"]
                    if (arr2[0].trim() == name) {
                        return arr2[1];
                    }
                }
            },
            clearCookie() {
                this.setCookie("", "", -1); //清除cookie
            },
            // 提交登录信息
            handleBindPhone() {
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        this.logining = true;
                        var _this = this;
                        if (_this.checked == true) {
                            //存入cookie
                            _this.setCookie(
                                _this.formLogin.username,
                                _this.formLogin.password,
                                7
                            ); //保存7天
                        } else {
                            _this.clearCookie();
                        }

                        // 登录
                        // 注意 这里的演示没有传验证码
                        // 具体需要传递的数据请自行修改代码
                        setTimeout(() => {
                            this.$axios({
                                method: 'post',
                                url: `/login`,
                                data: {
                                    username: _this.formLogin.username,
                                    password: _this.formLogin.password,
                                    yzm: _this.formLogin.yzm,
                                }
                            }).then((res) => {
                                if (res.data.msg == '验证码错误(小写字母)') {
                                    jquery('.switch').attr('src', `api/captcha?id=${Math.random()}`);
                                }
                                if (res.data.code === 0) {
                                    this.$message({
                                        message: '登录成功',
                                        type: 'success'
                                    });
                                    // 登录成功，去vuex里修改登录状态
                                    this.$store.commit('changIsSignIn', 1)
                                        // 设置sessionStorage
                                    sessionStorage.setItem("token", res.data.token);
                                    // 设置vuex里的token
                                    this.$store.commit('setToken', res.data.token)
                                    this.$router.push('/')
                                } else {
                                    const h = this.$createElement;
                                    this.$notify.error({
                                        title: '错误',
                                        message: h('i', {
                                            style: 'color: red'
                                        }, res.data.msg)
                                    });
                                }
                                this.logining = false;
                            }).catch(error => {
                                console.log(error);
                            });
                        }, 1000);
                    } else {
                        // 登录表单校验失败
                        this.$message.error("表单校验失败，请检查");
                        return false;
                    }
                });
            },
            Submitregistration() {
                this.$refs.registerForm.validate(valid => {
                    if (valid) {
                        this.loginings = true;
                        setTimeout(() => {
                            this.$axios.post('/register', {
                                data: this.formRegister
                            }).then(res => {
                                console.log(res.data);
                                if (res.data.code == 0) {
                                    this.$message({
                                        message: '注册成功',
                                        type: 'success'
                                    });
                                    this.show = true
                                    this.timer = null
                                    this.$refs.registerForm.resetFields()
                                } else {
                                    const h = this.$createElement;
                                    this.$notify.error({
                                        title: '错误',
                                        message: h('i', {
                                            style: 'color: red'
                                        }, res.data.msg)
                                    });
                                }
                                this.loginings = false
                            })
                        }, 1000);
                    } else {
                        this.$message.error("表单校验失败，请检查");
                        return false;
                    }
                })
            }
        },
        show(e) {
            if (e.keyCode == 13) {
                this.handleBindPhone()
            }
        }
    }
</script>
<style lang="less" scoped>
    .txt-rt {
        text-align: right;
    }
    
    .txt-lt {
        text-align: left;
    }
    
    .txt-center {
        text-align: center;
    }
    
    .float-rt {
        float: right;
    }
    
    .float-lt {
        float: left;
    }
    
    .clear {
        clear: both;
    }
    
    .pos-relative {
        position: relative;
    }
    
    .pos-absolute {
        position: absolute;
    }
    
    .vertical-base {
        vertical-align: baseline;
    }
    
    .vertical-top {
        vertical-align: top;
    }
    
    .underline {
        padding-bottom: 3px;
        border-bottom: 1px solid #eee;
    }
    
    nav.vertical ul li {
        display: block;
    }
    
    nav.horizontal ul li {
        display: inline-block;
    }
    
    img {
        max-width: 100%;
    }
    
    h1 {
        font-size: 45px;
        font-weight: 500;
        letter-spacing: 4px;
        margin: 60px 0;
        color: #FFFFFF;
    }
    
    .container {
        width: 60%;
        margin: 0 auto;
        padding: 40px;
        background-color: rgba(10, 10, 10, 0.77);
        border: 2px ridge rgba(238, 238, 238, 0.13);
        border-radius: 5px;
        -moz-box-shadow: 0 -5px 10px 1px rgba(16, 16, 16, 0.57);
        -webkit-box-shadow: 0 -5px 10px 1px rgba(16, 16, 16, 0.57);
        box-shadow: 0 -5px 10px 1px rgba(16, 16, 16, 0.57);
        border-bottom: none;
        border-bottom-left-radius: initial;
        border-bottom-right-radius: initial;
    }
    
    .login {
        width: 45%;
        float: left;
        text-align: left;
        padding-right: 40px;
    }
    
     ::-webkit-input-placeholder {
        color: #CCC;
    }
    
     :-moz-placeholder {
        color: #CCC;
    }
    
     ::-moz-placeholder {
        color: #CCC;
    }
    
    h2 {
        font-size: 35px;
        text-align: left;
        color: #FFF;
        font-weight: 100;
        margin-bottom: 20px;
    }
    
    ul.tick {
        float: left;
        list-style: none;
        display: inline-block;
        width: 100%;
        margin-bottom: 20px;
    }
    
    .social-icons {
        margin-top: 20px;
        text-align: center;
    }
    
    .social-icons p {
        color: #CCC;
        margin-bottom: 15px;
    }
    
    .social-icons ul li {
        float: left;
        width: 32.9%;
    }
    
    .copyrights {
        text-indent: -9999px;
        height: 0;
        line-height: 0;
        font-size: 0;
        overflow: hidden;
    }
    
    li.twt {
        margin: 0 2px;
    }
    
    .social-icons ul li a {
        display: block;
    }
    
    .social-icons ul li a span {
        vertical-align: middle;
        color: #fff;
        font-size: 15px;
    }
    
    .social-icons ul li span.icons {
        background: url("~@/assets/register/images/i1.png") no-repeat center;
        width: 30px;
        height: 30px;
        display: inline-block;
    }
    
    .social-icons ul li.weixin span.icons {
        background: url("~@/assets/register/images/weixin.png") no-repeat;
        background-size: 100%;
    }
    
    .social-icons ul li.qq span.icons {
        background: url("~@/assets/register/images/QQ.png") no-repeat;
        background-size: 100%;
    }
    
    .social-icons ul li.weibo span.icons {
        /*--w3layouts--*/
        /*--agileits--*/
        background: url("~@/assets/register/images/weibo.png") no-repeat;
        background-size: 100%;
    }
    
    .social-icons ul li a:hover span.icons {
        transform: rotatey(360deg);
        -webkit-transform: rotatey(360deg);
        -o-transform: rotatey(360deg);
        -moz-transform: rotatey(360deg);
        -ms-transform: rotatey(360deg);
        transition: .5s all;
    }
    
    .send-button {
        margin-bottom: 20px;
    }
    
    .login a {
        color: #CCC;
    }
    
    .login a:hover {
        color: #FFF;
    }
    
    .register {
        width: 44%;
        float: left;
        border-left: 1px solid #DDD;
        padding-left: 40px;
        text-align: left;
    }
    
    .register p {
        color: #CCC;
        margin-bottom: 10px;
    }
    
    .register p a {
        color: #CCC;
    }
    
    .register p a:hover {
        color: #FFF;
    }
    
    .footer {
        text-align: center;
        margin: 100px 20px 20px;
    }
    
    .footer p {
        color: #CCC;
        line-height: 25px;
        /*--w3layouts--*/
        /*--agileits--*/
    }
    
    .footer a {
        color: #CCC;
        text-decoration: none;
    }
    
    .footer a:hover {
        color: #FFF;
    }
    /*-- Index-Page-Styling --*/
    /*--- Responsive Code ---*/
    
    @media screen and (max-width: 1920px) {
        h1 {
            margin: 100px 0;
        }
    }
    
    @media screen and (max-width: 1600px) {
        h1 {
            margin: 60px 0;
        }
    }
    
    @media screen and (max-width: 1440px) {
        .container {
            width: 53%;
        }
    }
    
    @media screen and (max-width: 1366px) {
        h1 {
            margin: 50px 0;
        }
        .container {
            width: 57%;
        }
        /*--w3layouts--*/
        /*--agileits--*/
    }
    
    @media screen and (max-width: 1280px) {
        .container {
            width: 60%;
        }
    }
    
    @media screen and (max-width: 1024px) {
        .container {
            width: 76%;
        }
    }
    
    @media screen and (max-width: 966px) {
        .container {
            width: 80%;
        }
        .footer {
            margin: 50px 20px 20px;
        }
    }
    
    @media screen and (max-width: 853px) {
        .login {
            padding-right: 36px;
        }
        .register {
            padding-left: 36px;
        }
        .social-icons ul li {
            width: 32.8%;
        }
        .register p {
            font-size: 14px;
        }
    }
    
    @media screen and (max-width: 800px) {
        h1 {
            font-size: 43px;
        }
        .login {
            padding-right: 35px;
        }
        .register {
            padding-left: 34px;
        }
        .social-icons ul li span.icons {
            width: 28px;
        }
    }
    
    @media screen and (max-width: 768px) {
        .container {
            width: 85%;
        }
        .register p {
            font-size: 13.8px;
        }
    }
    
    @media screen and (max-width: 736px) {
        h1 {
            font-size: 40px;
        }
        .container {
            width: 87%;
            padding: 35px;
        }
        .login {
            padding-right: 34px;
        }
        .register {
            padding-left: 33px;
        }
        .social-icons ul li a span {
            font-size: 14px;
        }
        .register p {
            font-size: 13.2px;
        }
    }
    
    @media screen and (max-width: 667px) {
        h1 {
            font-size: 35px;
            letter-spacing: 3px;
        }
        .container {
            width: 55%;
            padding: 50px;
        }
        .login {
            padding: 0;
            width: 100%;
            margin-bottom: 50px;
        }
        .register {
            padding: 40px 0 0 0;
            width: 100%;
            border: none;
            border-top: 1px solid #DDD;
        }
    }
    
    @media screen and (max-width: 603px) {
        h1 {
            letter-spacing: 2px;
        }
    }
    
    @media screen and (max-width: 568px) {
        h1 {
            letter-spacing: 1px;
            margin: 30px 0;
        }
        .container {
            width: 60%;
            padding: 40px;
        }
    }
    
    @media screen and (max-width: 533px) {
        h1 {
            font-size: 32px;
        }
    }
    
    @media screen and (max-width: 480px) {
        .container {
            width: 70%;
            padding: 35px;
        }
        .send-button input[type="submit"] {
            width: 50%;
            padding: 8px 0;
        }
    }
    
    @media screen and (max-width: 414px) {
        h1 {
            font-size: 30px;
        }
        .container {
            width: 75%;
            padding: 25px;
        }
        .login {
            margin-bottom: 30px;
        }
        h2 {
            font-size: 30px;
            margin-bottom: 15px;
        }
        .register {
            padding: 30px 0 0 0;
        }
        .footer p {
            font-size: 14px;
        }
    }
    
    @media screen and (max-width: 384px) {
        h1 {
            letter-spacing: 0px;
        }
    }
    
    @media screen and (max-width: 375px) {
        .social-icons ul li span.icons {
            width: 27px;
        }
        .register p {
            font-size: 13px;
            line-height: 23px;
        }
    }
    
    @media screen and (max-width: 360px) {
        .container {
            width: 80%;
            padding: 20px;
        }
    }
    
    @media screen and (max-width: 320px) {
        .social-icons ul li {
            width: 32.7%;
        }
        .social-icons ul li span.icons {
            width: 25px;
        }
        .social-icons ul li a span {
            font-size: 12.4px;
        }
    }
    
    #bgvid {
        position: fixed;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        background-size: cover;
        img {
            width: 100%;
            height: 100%;
        }
    }
</style>